<template>
  
    <div>
    <el-tabs v-model="activeName" type="border-card" :before-leave="beforeTabLeave">
      <el-tab-pane name="class" label="班级列表">
        <div class="mod-class">
          <el-form :inline="true">
              <el-form-item label="入学年份" prop="classLeader">
              <el-date-picker value-format="yyyy" @change="getDataList" v-model="search.startYear" type="year" placeholder="选择年">
              </el-date-picker>
          </el-form-item>


          <el-form-item label="所属专业" prop="deptId">
              <el-popover ref="majorName" placement="bottom-start" trigger="click">
                  <el-tree :data="majorList" :props="majorListTreeProps" node-key="majorId" ref="majorListTree"
                      @current-change="majortListTreeCurrentChangeHandle" :default-expand-all="true"
                      :highlight-current="true" :expand-on-click-node="false">
                  </el-tree>
              </el-popover>
              <el-input v-model="search.majorName"  v-popover:majorName :readonly="false" placeholder="点击选择学院"
                  class="menu-classData"></el-input>
          </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="searchClass()">搜索
                  </el-button>
              </el-form-item>
              <el-form-item>
                  <el-button v-if="isAuth('easbaseinfo:class:save')" type="primary" @click="addOrUpdateHandle()">新增
                  </el-button>
              </el-form-item>
              <el-form-item>
                  <el-button v-if="isAuth('easbaseinfo:class:delete')" :disabled="dataListSelections.length <= 0"
                      type="danger" @click="deleteHandle()">批量删除
                  </el-button>
              </el-form-item>
          </el-form>

          <el-table :data="classList" row-key="classId" border v-loading="dataListLoading"
              @selection-change="selectionChangeHandle" style="width: 100%  ">
              <el-table-column type="selection" header-align="center" align="center" width="50">
              </el-table-column>
              
              <el-table-column prop="classCode" header-align="center" align="center" min-width="100" label="班级">
              </el-table-column>
              <el-table-column prop="classLeader" header-align="center" align="center" min-width="100" label="负责人">
              </el-table-column>
              <el-table-column prop="studentLength" header-align="center" align="center" min-width="100" label="学制度">
              </el-table-column>
              <el-table-column prop="startYear" header-align="center" align="center" min-width="100" label="入学年份">
              </el-table-column>
              <el-table-column prop="major.majorName" header-align="center" align="center" min-width="100" label="专业">
              </el-table-column>
              
              <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                  <template slot-scope="scope">
                      <el-button  type="text" size="small"
                          @click="arrangecourse(scope.row.classId)">安排课表</el-button>
                      <el-button v-if="isAuth('eascourse:curriculum:delete')" type="text" size="small"
                          @click="deleteHandle(scope.row.classId,scope.row.classCode)">清空课表</el-button>
                      
                  </template>
              </el-table-column>
          </el-table>
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
              :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
          <!-- 弹窗, 新增 / 修改 -->
          
      </div>
      </el-tab-pane>
      <el-tab-pane name="curriculum" label="课程安排">
        <arrange v-if="arrangeVisible" ref="arrange" @refreshDataList="getDataList"></arrange>
      </el-tab-pane>
    </el-tabs>
  </div>
    
      

</template>

<script>
import { classApi,majorApi } from '@/api/baseinfo'
import { treeDataSetParent,clone } from '@/utils';
import arrange from '@/components/ClassSchedule/arrange';
import { curriculumApi } from '@/api/course';


export default {
  components: {
    arrange
  },
  props: {},
  data() {
      return {
          classList: [],
          activeName:'class',
          arrangeVisible: false,
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          startYear:'',
          dataListSelections: [],
          dataListLoading: true,
          search: {
              classCode: '',
              majorName: '',
              majorId:'',
              majorName:'',
              startYear:''
              

          },
          majorList: [],
          majorListTreeProps: {
              label: 'majorName',
              children: 'list'
          }
      };
  },
  watch: {},
  computed: {},
  methods: {
      getDataList() {
          this.dataListLoading = true
          let data = Object.assign(this.search,
              {
                  limit: this.pageSize,
                  page: this.pageIndex,
                  // name:this.search
              })
              classApi.listClass(data).then(({ page }) => {
              this.classList = page.list
              this.dataListLoading = false
              this.totalPage = page.totalPage
              return page

          }).then(()=>{
              majorApi.listMajorNoPage().then(({ data }) => {

                  let cloneData = clone(data)
                  this.majorList = cloneData
              })
          }).catch(e => {
              this.$message({
                  message: '加载失败',
                  type: 'error',
                  duration: 1500,
                  onClose: () => {
                      this.dataListLoading = false
                  }
              })

          })

      },
      beforeTabLeave(ac){
        let p = new Promise((resolve,reject)=>{
         
          if(this.activeName =='class' && ac=='curriculum'){
            reject()
          }
          
          resolve()
        })
        return p 
       
      },
      searchClass() {
          this.getDataList()
      },
      arrangecourse(id) {
        console.log(id);
        this.activeName = 'curriculum'
          this.arrangeVisible = true
          this.$nextTick(() => {
              this.$refs.arrange.init(id)
          })
      },
      // 每页数
      sizeChangeHandle(val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
          this.pageIndex = val
          this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
          this.dataListSelections = val
      },
      majortListTreeCurrentChangeHandle(data, node) {
          this.search.majorId = data.majorId
          this.search.majorName = data.majorName
          this.getDataList()
      },

      deleteHandle(id,code) {

          var ids = id ? [id] : this.dataListSelections.map(item => {
              return item.classId
          })
          this.$confirm(`确定对[${code}]进行[课表清空]操作?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              curriculumApi.clear(ids).then(() => {
                  this.$message({
                      message: '操作成功',
                      type: 'success',
                      duration: 1500,
                      onClose: () => {
                          this.getDataList()
                      }
                  })

              })
          }).catch(() => { })
      }
  },
  created() {
      this.getDataList()
  },
  mounted() {

  }
};
</script>

<style lang="scss">


//
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<style lang="scss" scoped>
.el-card {
  max-width: 70rem;
  min-width: 34rem;
  margin: 5rem auto;
}
</style>